<template>
  <div
    class="musiclistitem"
    @click="toListPage(item)"
    :style="{ width: wth, marginTop: mtop, marginBottom: mbom }"
  >
    <el-card :body-style="{ padding: '0px', width: '100%' }" shadow="hover">
      <div class="card">
        <img
          :src="
            cardType !== 'music'
              ? $filters.formatImgSize(item[`${imgUrl}`], 300)
              : $filters.formatImgSize(item.album[`${imgUrl}`], 300)
          "
          class="image"
          :class="{ 'img-album': albumType }"
        />
        <div class="bg-img" v-if="albumType"></div>
        <slot name="musictop">
          <div class="right-t">
            <slot name="topIcon">
              <el-icon style="padding-top: 4px; padding-left: 15px">
                <headset></headset>
              </el-icon>
            </slot>
            <span>{{
              item.playCount ? $filters.formatPlays(item.playCount) : ''
            }}</span>
          </div>
          <div class="top-t" v-if="topShow">
            <span>{{ item.name }}</span>
          </div>
        </slot>
        <div class="btm" v-if="playShow">
          <el-icon>
            <video-play></video-play>
          </el-icon>
        </div>
        <div class="user" v-if="userShow">
          <slot name="userName" :row="item">
            <span>
              <el-icon> <user></user> </el-icon
              >{{ item.artistName || item.creator.nickname }}</span
            >
          </slot>
        </div>
      </div>
    </el-card>
    <slot name="musicBtm">
      <div class="namet">
        <span>{{ item.name || item.title }}</span>
      </div>
    </slot>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    wth: {
      type: String,
      default: '18%'
    },
    mtop: {
      type: String,
      default: '25px'
    },
    mbom: {
      type: String,
      default: '0px'
    },
    playShow: {
      type: Boolean,
      default: true
    },
    topShow: {
      type: Boolean,
      default: true
    },
    userShow: {
      type: Boolean,
      default: false
    },
    cardType: {
      type: String,
      default: 'songs'
    },
    imgUrl: {
      trpe: String,
      default: 'coverImgUrl' //item.coverImgUrl || item.sPicUrl || item.cover
    },
    albumType: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    // 因为视频,歌手也用了该组件 所以需要判断
    const router = useRouter()
    const store = useStore()
    function toListPage(item: any) {
      if (props.cardType == 'singer') {
        router.push('/main/singer' + item.id)
        return
      }
      if (props.cardType == 'music') {
        item.singel = true
        store.dispatch('music/playMusic', item)
        router.push('/main/nowmusic')
        return
      }
      if (props.cardType == 'mv') {
        router.push({
          path: '/main/mvvideo',
          query: {
            id: item.id,
            type: 'mv'
          }
        })
        return
      }
      if (props.cardType == 'video') {
        router.push({
          path: '/main/mvvideo',
          query: {
            id: item.vid,
            type: 'video'
          }
        })
        return
      }
      if (props.cardType == 'anchor') {
        router.push({
          path: '/main/anchor',
          query: {
            id: item.id,
            type: 'anchor'
          }
        })
        return
      }
      router.push('/main/songsheet' + item.id)
    }
    return {
      toListPage
    }
  }
})
</script>

<style scoped>
.card {
  position: relative;
}
.bg-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0px;
  background: url('../../../assets/img/musicplay/coverall.png') no-repeat;
  background-position: -1px -844px;
}

.image {
  width: 100%;
  display: inline-block;
  position: relative;
  min-width: 130px;
  min-height: 130px;
  box-sizing: border-box;
}
.img-album {
  padding-right: 16px;
}
.user {
  width: 100%;
  position: absolute;
  bottom: 7px;
  left: 0;
  font-size: 13px;
  color: aliceblue;
  background-image: linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.4));
}
.namet {
  padding-top: 10px;
  font-size: 13px;
  height: 40px;
}

.btm {
  position: absolute;
  bottom: 4%;
  /* bottom: 36px; */
  right: 6px;
  font-size: 28px;
  color: red;
  cursor: pointer;
  transform: translateX(115%);
  transition: transform 0.3s;
}
.btm:hover {
  color: rgba(255, 255, 255, 0.95);
}
.musiclistitem:hover .btm {
  transform: translateX(0);
}
.top-t {
  position: absolute;
  top: 0px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 0px;
  transform: translateY(-100%);
  transition: transform 0.5s;
  width: 100%;
  height: 20px;
  overflow: hidden;
  line-height: 1.9;
}
.musiclistitem:hover .top-t {
  transform: translateY(0);
}
.right-t {
  width: 80px;
  height: 14px;
  position: absolute;
  padding-top: 1px;
  top: 0px;
  right: 0;
  font-size: 12px;
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0)
  );
  color: #fff;
  display: flex;
  justify-content: space-evenly;
}
.musiclistitem {
  margin-top: 25px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 10px;
  line-height: 1.5;
  /* min-height: 250px; */
}
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image::after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url('../../../assets/img/down/down.png') no-repeat center;
  z-index: 99;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>
